Solid Router: Kliendipoolse Navigeerimise Meisterlik Kasutamine SolidJS-is

SolidJS, tuntud oma erakordse jõudluse ja lihtsuse poolest, pakub fantastilist alust kaasaegsete veebirakenduste loomiseks. Tõeliselt kaasahaaravate ja kasutajasõbralike kogemuste loomiseks on hädavajalik robustne kliendipoolne ruuter. Siin tulebki mängu Solid Router, SolidJS-i ametlik ja soovitatav ruuter, mis on loodud sujuvaks integreerimiseks raamistiku reaktiivsete põhimõtetega.

See põhjalik juhend süveneb Solid Routeri maailma, käsitledes kõike alates põhisätetest kuni keerukate ja dünaamiliste üheleheküljeliste rakenduste (SPA) loomise täiustatud tehnikateni. Olenemata sellest, kas olete kogenud SolidJS-i arendaja või alles alustate, annab see artikkel teile teadmised ja oskused kliendipoolse navigeerimise valdamiseks.

Mis on Solid Router?

Solid Router on kergekaaluline ja suure jõudlusega kliendipoolne ruuter, mis on spetsiaalselt loodud SolidJS-i jaoks. See kasutab SolidJS-i reaktiivsust, et tõhusalt uuendada kasutajaliidest vastavalt brauseri URL-i muudatustele. Erinevalt traditsioonilistest ruuteritest, mis tuginevad virtuaalse DOM-i võrdlemisele, manipuleerib Solid Router otse DOM-iga, mis tagab kiirema ja ennustatavama jõudluse.

Solid Routeri peamised omadused on järgmised:

• Deklaratiivne marsruutimine: Määratlege oma marsruudid lihtsa ja intuitiivse JSX-põhise API abil.
• Dünaamiline marsruutimine: Hallake hõlpsalt parameetritega marsruute, mis võimaldab luua dünaamilisi ja andmepõhiseid rakendusi.
• Pesastatud marsruudid: Korraldage oma rakendus loogilistesse osadesse pesastatud marsruutide abil.
• Lingikomponent: Navigeerige sujuvalt marsruutide vahel, kasutades komponenti <A>, mis tegeleb automaatselt URL-i uuenduste ja aktiivse lingi stiilimisega.
• Andmete laadimine: Laadige andmed asünkroonselt enne marsruudi renderdamist, tagades sujuva kasutajakogemuse.
• Üleminekud: Looge visuaalselt meeldivaid üleminekuid marsruutide vahel, et parandada kasutajakogemust.
• Veahaldus: Hallake vigu sujuvalt ja kuvage kohandatud vealehti.
• Ajaloo API integreerimine: Integreerub sujuvalt brauseri Ajaloo API-ga, võimaldades kasutajatel navigeerida tagasi- ja edasi-nuppude abil.

Solid Routeriga alustamine

Paigaldamine

Solid Routeri paigaldamiseks kasutage oma eelistatud paketihaldurit:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Põhiseadistus

Solid Routeri tuum keerleb komponentide <Router> ja <Route> ümber. Komponent <Router> toimib teie rakenduse marsruutimissüsteemi juurena, samas kui <Route> komponendid määratlevad vastavuse URL-ide ja komponentide vahel.

Siin on lihtne näide:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites ümbritseb komponent <Router> kogu rakendust. Komponendid <Route> määratlevad kaks marsruuti: ühe juurtee ("/") ja teise "/about" tee jaoks. Kui kasutaja navigeerib ühele neist teedest, renderdatakse vastav komponent (Home või About).

Komponent <A>

Marsruutide vahel navigeerimiseks kasutage Solid Routeri pakutavat komponenti <A>. See komponent sarnaneb tavalise HTML-i <a> sildiga, kuid see tegeleb automaatselt URL-i uuendustega ja hoiab ära terve lehe uuesti laadimise.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Kodu</A>
      <A href="/about">Meist</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Kui kasutaja klõpsab ühel neist linkidest, uuendab Solid Router brauseri URL-i ja renderdab vastava komponendi ilma tervet lehte uuesti laadimata.

Täiustatud marsruutimistehnikad

Dünaamiline marsruutimine marsruudi parameetritega

Solid Router toetab dünaamilist marsruutimist, mis võimaldab teil luua parameetritega marsruute. See on kasulik sisu kuvamiseks konkreetse ID või nime (slug) alusel.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites on :id segment teekonnas marsruudi parameeter. id parameetri väärtusele juurdepääsemiseks UserProfile komponendis saate kasutada useParams hook'i:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>Kasutajaprofiil</h1>
      {user() ? (
        <div>
          <p>Nimi: {user().name}</p>
          <p>E-post: {user().email}</p>
        </div>
      ) : (<p>Laadimine...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

useParams hook tagastab objekti, mis sisaldab marsruudi parameetreid. Sel juhul sisaldab params.id URL-ist pärineva id parameetri väärtust. Seejärel kasutatakse createResource hook'i kasutajaandmete toomiseks ID alusel.

Rahvusvaheline näide: Kujutage ette ülemaailmset e-kaubanduse platvormi. Dünaamilise marsruutimise abil saate kuvada toote üksikasju toote ID alusel: /products/:productId. See võimaldab teil hõlpsasti luua iga toote jaoks unikaalseid URL-e, mis teeb kasutajatele lihtsamaks konkreetsete toodete jagamise ja järjehoidjatesse lisamise, olenemata nende asukohast.

Pesastatud marsruudid

Pesastatud marsruudid võimaldavad teil korraldada oma rakenduse loogilistesse osadesse. See on eriti kasulik keerukate rakenduste puhul, millel on mitu navigeerimistasandit.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites toimib komponent <Dashboard> komponentide <Profile> ja <Settings> konteinerina. Marsruudid <Profile> ja <Settings> on pesastatud <Dashboard> marsruudi sees, mis tähendab, et neid renderdatakse ainult siis, kui kasutaja on "/dashboard" teel.

Pesastatud marsruutide renderdamiseks <Dashboard> komponendi sees peate kasutama komponenti <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Töölaud</h1>
      <nav>
        <A href="/dashboard/profile">Profiil</A>
        <A href="/dashboard/settings">Seaded</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

Komponent <Outlet> toimib kohahoidjana, kuhu renderdatakse pesastatud marsruudid. Kui kasutaja navigeerib aadressile "/dashboard/profile", renderdatakse komponent <Profile> komponendi <Outlet> sees. Sarnaselt, kui kasutaja navigeerib aadressile "/dashboard/settings", renderdatakse komponent <Settings> komponendi <Outlet> sees.

Andmete laadimine createResource abil

Andmete asünkroonne laadimine enne marsruudi renderdamist on sujuva kasutajakogemuse pakkumiseks ülioluline. Solid Router integreerub sujuvalt SolidJS-i createResource hook'iga, muutes andmete laadimise imelihtsaks.

Nägime sellest näidet varem UserProfile komponendis, kuid siin on see selguse huvides uuesti:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>Kasutajaprofiil</h1>
      {user() ? (
        <div>
          <p>Nimi: {user().name}</p>
          <p>E-post: {user().email}</p>
        </div>
      ) : (<p>Laadimine...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

createResource hook võtab kaks argumenti: signaali, mis käivitab andmete laadimise, ja funktsiooni, mis toob andmed. Sel juhul on signaal () => params.id, mis tähendab, et andmed tuuakse iga kord, kui id parameeter muutub. Funktsioon fetchUser toob kasutaja andmed API-st ID alusel.

createResource hook tagastab massiivi, mis sisaldab ressurssi (toodud andmed) ja funktsiooni andmete uuesti toomiseks. Ressurss on signaal, mis hoiab andmeid. Andmetele pääseb ligi signaali välja kutsudes (user()). Kui andmed alles laadivad, tagastab signaal undefined. See võimaldab teil kuvada laadimise indikaatorit, kuni andmeid tuuakse.

Üleminekud

Marsruutide vahele üleminekute lisamine võib kasutajakogemust oluliselt parandada. Kuigi Solid Routeril ei ole sisseehitatud üleminekute tuge, integreerub see hästi teekidega nagu solid-transition-group, et saavutada sujuvaid ja visuaalselt meeldivaid üleminekuid.

Esmalt paigaldage pakett solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Seejärel mähkige oma marsruudid komponendiga <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites on iga marsruut mähitud komponendiga <Transition>. Atribuut name määrab ülemineku CSS-klassi eesliite ja atribuut duration määrab ülemineku kestuse millisekundites.

Peate oma stiililehel määratlema vastavad CSS-klassid ülemineku jaoks:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

See CSS-kood määratleb lihtsa sisse- ja väljahaajumise ülemineku. Marsruudile sisenemisel rakendatakse klassid .fade-enter ja .fade-enter-active, mis põhjustab komponendi sissehaajumise. Marsruudilt lahkumisel rakendatakse klassid .fade-exit ja .fade-exit-active, mis põhjustab komponendi väljahaajumise.

Veahaldus

Vigade sujuv käsitlemine on hea kasutajakogemuse pakkumiseks hädavajalik. Solid Routeril ei ole sisseehitatud veahaldust, kuid saate selle hõlpsalt rakendada, kasutades globaalset veapiiri (error boundary) või marsruudispetsiifilist veahaldurit.

Siin on näide globaalsest veapiirist:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Midagi läks valesti: {error()?.message}</p>}>
      <Suspense fallback={<p>Laadimine...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Komponent <ErrorBoundary> püüab kinni kõik vead, mis tekivad selle laste sees. Atribuut fallback määrab komponendi, mida renderdada vea ilmnemisel. Sel juhul renderdab see lõigu veateatega.

Komponent <Suspense> tegeleb ootel lubadustega (promises), mida tavaliselt kasutatakse asünkroonsete komponentide või andmete laadimisel. See kuvab `fallback` atribuuti, kuni lubadused lahenevad.

Vea käivitamiseks võite komponendi sees visata erandi:

            function Home() {
  throw new Error('Avalehe laadimine ebaõnnestus');

  return <h1>Kodu</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Selle koodi käivitamisel püüab komponent <ErrorBoundary> vea kinni ja renderdab tagavaralahenduse komponendi.

Rahvusvahelised kaalutlused: Veateadete kuvamisel arvestage rahvusvahelistamisega (i18n). Kasutage tõlketeeki, et pakkuda veateateid kasutaja eelistatud keeles. Näiteks kui Jaapanis asuv kasutaja satub veale, peaks ta nägema veateadet jaapani, mitte inglise keeles.

Solid Routeri kasutamise parimad tavad

• Hoidke oma marsruudid korras: Kasutage pesastatud marsruute, et korraldada oma rakendus loogilistesse osadesse. See muudab koodi hooldamise ja selles navigeerimise lihtsamaks.
• Kasutage marsruudi parameetreid dünaamilise sisu jaoks: Kasutage marsruudi parameetreid dünaamiliste URL-ide loomiseks, et kuvada sisu konkreetse ID või nime alusel.
• Laadige andmed asünkroonselt: Laadige andmed asünkroonselt enne marsruudi renderdamist, et pakkuda sujuvat kasutajakogemust.
• Lisage marsruutide vahele üleminekuid: Kasutage üleminekuid kasutajakogemuse parandamiseks ja rakenduse lihvitumaks muutmiseks.
• Hallake vigu sujuvalt: Rakendage veahaldus, et püüda ja kuvada vigu kasutajasõbralikul viisil.
• Kasutage kirjeldavaid marsruutide nimesid: Valige marsruutide nimed, mis peegeldavad täpselt marsruudi sisu. See muudab teie rakenduse struktuuri mõistmise lihtsamaks.
• Testige oma marsruute: Kirjutage ühikutestid, et tagada oma marsruutide korrektne toimimine. See aitab teil vigu varakult avastada ja vältida regressioone.

Kokkuvõte

Solid Router on võimas ja paindlik kliendipoolne ruuter, mis integreerub sujuvalt SolidJS-iga. Selle funktsioonide valdamise ja parimate tavade järgimise abil saate luua keerukaid ja dünaamilisi üheleheküljelisi rakendusi, mis pakuvad sujuvat ja kaasahaaravat kasutajakogemust. Alates põhisätetest kuni täiustatud tehnikateni nagu dünaamiline marsruutimine, andmete laadimine ja üleminekud, on see juhend andnud teile teadmised ja oskused, et enesekindlalt navigeerida kliendipoolse navigeerimise maailmas SolidJS-is. Võtke omaks Solid Routeri võimsus ja avage oma SolidJS-i rakenduste täielik potentsiaal!

Ärge unustage tutvuda ametliku Solid Routeri dokumentatsiooniga kõige ajakohasema teabe ja näidete saamiseks: [Solid Routeri dokumentatsiooni link - kohatäide]

Jätkake imeliste asjade ehitamist SolidJS-iga!